<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>
  	<script src="resources/js/jquery.js"></script>
	<script src="resources/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="resources/css/datepicker.css" />
	<script src="resources/js/datepicker.js"></script>
	<script type="text/javascript">
		$(function() {
			$(".gameDate").datepicker({
			    noDefault: true, // set this to true if you don't want the current date inserted if the value-attribute is empty
			    format: 'yyyy-mm-dd hh:ii',
			    weekStart: 0,
			    days: ["일","월","화","수","목","금","토"],
			    months: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"]
			});
		});
		
		$(function() {
			
			if ("${toggle}" == 'hidden') {
				$("#searchdiv").hide();
			}
			
			$("#opensearch").click(function() {
				$("#searchdiv").toggle();
				return false;
			});
		});
	</script>
	<style>
  		.table > tbody > tr > td {
  			vertical-align:middle;
  		}
  		
  		.box {
  			width: 50%; height: 50%;
  		}
  		.input-group-addon {
  			background-color: #ffffff;
  			border: 0px;
  		}
  	</style>
  </head>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header clearfix">
			<h2 class="pull-left">경기검색</h2>
			<div class="pull-right" style="padding-top: 30px">
				<a href="#" id="opensearch" class="btn btn-info">경기검색 펼치기/접기</a>
			</div>
		</div>
			
		<div id="searchdiv">
			<form id="searchGame" class="form-horizontal" role="form" method="get" action="searchGame">
				<fieldset>
					<div class="clearfix">
					
						<div class="box pull-left">
							<div class="form-group">
								<label class="col-md-2 control-label">홈팀</label>
								<div class="col-md-9">
									<div class="row">
										<div class="col-md-4">
											<select class="form-control" name="homeSport">
												<option value="default">- 종목 -</option>
												<c:forEach items="${sportList}" var="sportList">
													<option value="${sportList.idSport}" <c:if test="${sportList.idSport == homeSport}">selected</c:if>>${sportList.sportName}</option>
												</c:forEach>
											</select>
										</div>
										<div class="col-md-4">
											<select class="form-control" name="homeLeague">
												<option value="default">- 종목을 먼저 선택하여 주세요 -</option>
											</select>
										</div>
										<div class="col-md-4">
											<select class="form-control" name="homeTeam">
												<option value="default">- 리그를 먼저 선택하여 주세요 -</option>
											</select>
										</div>
									</div>
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-md-2 control-label">원정팀</label>
								<div class="col-md-9">
									<div class="row">
										<div class="col-md-4">
											<select class="form-control" name="awaySport">
												<option value="default">- 종목 -</option>
												<c:forEach items="${sportList}" var="sportList">
													<option value="${sportList.idSport}" <c:if test="${sportList.idSport == awaySport}">selected</c:if>>${sportList.sportName}</option>
												</c:forEach>
											</select>
										</div>
										<div class="col-md-4">
											<select class="form-control" name="awayLeague">
												<option value="default">- 종목을 먼저 선택하여 주세요 -</option>
											</select>
										</div>
										<div class="col-md-4">
											<select class="form-control" name="awayTeam">
												<option value="default">- 리그를 먼저 선택하여 주세요 -</option>
											</select>
										</div>
									</div>
								</div>
							</div>
							
							<div class="form-group">
								<label for="gameDate" class="col-md-2 control-label">경기시간</label>
								<div class="col-md-9 input-group input-group-sm">
									<input type="text" class="form-control gameDate" name="gameDate1" placeholder="yyyy-mm-dd hh:mm" value="${gameDate1}" />
									<span class="input-group-addon">~</span>
									<input type="text" class="form-control gameDate" name="gameDate2" placeholder="yyyy-mm-dd hh:mm" value="${gameDate2}" />
								</div>
							</div>
							
							<div class="form-group">
								<label for="gameStatus" class="col-md-2 control-label">경기상태</label>
								<div class="col-md-9">
									<select class="form-control" name="gameStatus">
										<option value="default">- 경기상태 -</option>
										<option value="0" <c:if test="${gameStatus == 0}">selected</c:if>>판매중</option>
										<option value="1" <c:if test="${gameStatus == 1}">selected</c:if>>경기중</option>
										<option value="2" <c:if test="${gameStatus == 2}">selected</c:if>>경기완료</option>
										<option value="3" <c:if test="${gameStatus == 3}">selected</c:if>>경기취소</option>
									</select>
								</div>
							</div>
							
						</div>
						
						<div class="box pull-right">
						
							<div class="form-group">
								<label for="sport" class="col-md-2 control-label">종목</label>
								<div class="col-md-9">
									<select class="form-control" name="sport">
										<option value="default">- 종목 -</option>
										<c:forEach items="${sportList}" var="sportList">
											<option value="${sportList.idSport}" <c:if test="${sportList.idSport == sport}">selected</c:if>>${sportList.sportName}</option>
										</c:forEach>
									</select>
								</div>
							</div>
						
							<div class="form-group">
								<label for="league" class="col-md-2 control-label">리그</label>
								<div class="col-md-9">
									<select class="form-control" name="league">
										<option value="default">- 종목을 먼저 선택하여 주세요 -</option>
									</select>
								</div>
							</div>
							
							<div class="form-group">
								<label for="regDate" class="col-md-2 control-label">등록일</label>
								<div class="col-md-9 input-group input-group-sm">
									<input type="date" class="form-control" name="regDate1" placeholder="yyyy-mm-dd" value="${regDate1}" />
									<span class="input-group-addon">~</span>
									<input type="date" class="form-control" name="regDate2" placeholder="yyyy-mm-dd" value="${regDate2}" />
								</div>
							</div>
							
						</div>
						
						<div class="form-group">
							<div class="col-md-offset-2 col-md-8">
								<div class="row">
									<div class="col-md-6">
										<button type="submit" class="btn btn-primary btn-block">검색하기</button>
									</div>
									<div class="col-md-6">
										<button type="reset" class="btn btn-warning btn-block">다시작성</button>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</fieldset>
			</form>
			<hr/>
		</div>
		
		<span class="pull-left" style="margin-bottom:10px;">등록 : ${page.totalArticleCount}건 / 활성 : ${displayCount}건 / 비활성 : ${unDisplayCount}건</span>
		<div class="table-responsive">
			<table class="table table-striped table-hover">
				<thead>
					<tr class="warning row">
						<th class="text-center col-md-1">번호</th>
						<th class="text-center col-md-1">리그</th>
						<th class="text-center col-md-2">경기시간</th>
						<th class="text-center col-md-3">홈팀</th>
						<th class="text-center col-md-1">경기상태</th>
						<th class="text-center col-md-3">원정팀</th>
						<th class="text-center col-md-1">전시여부</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${list}" var="item">
						<tr class="row">
							<td class="col-md-1 text-center">${item.idGame}</td>
							<td class="col-md-1 text-center">${item.idLeagueValue}</td>
							<td class="col-md-2 text-center">
								<fmt:parseDate value="${item.gameDate.substring(0, 12)}" var="dateFmt" pattern="yyyyMMddHHmm"/>
                                <fmt:formatDate value="${dateFmt}" pattern="yyyy-MM-dd HH:mm"/>
							</td>
							<td class="col-md-3 text-center"><a href="viewTeam?id=${item.idHomeTeam}">${item.idHomeTeamValue}</a></td>
							<td class="col-md-1 text-center">
								<c:if test="${item.gameStatus == 1}">
									<c:if test="${item.gameStatus == 1}">
										<c:choose>
											<c:when test="${now < item.gameDate}">
												<a href="viewGame?page=${page.nowPage}&id=${item.idGame}<c:if test="${where != null}">&where=${where}</c:if>" 
													class="btn btn-primary btn-block" role="button">판매중</a>
											</c:when>
											<c:otherwise>
												<a href="viewGame?page=${page.nowPage}&id=${item.idGame}<c:if test="${where != null}">&where=${where}</c:if>" 
													class="btn btn-success btn-block" role="button">경기중</a>
											</c:otherwise>
										</c:choose>
									</c:if>
								</c:if>
								<c:if test="${item.gameStatus == 2}">
									<%-- <a href="viewGame?page=${page.nowPage}&id=${item.idGame}<c:if test="${where != null}">&where=${where}</c:if>" 
										class="btn btn-default btn-block" role="button">${item.homeScore} : ${item.awayScore}</a> --%>
									<a href="viewGame?page=${page.nowPage}&id=${item.idGame}<c:if test="${where != null}">&where=${where}</c:if>">
										<button type="button" class="btn btn-inverse btn-block">${item.homeScore} : ${item.awayScore}</button>
									</a>
								</c:if>
								<c:if test="${item.gameStatus == 3}">
									<a href="viewGame?page=${page.nowPage}&id=${item.idGame}<c:if test="${where != null}">&where=${where}</c:if>" 
										class="btn btn-danger btn-block" role="button">경기취소</a>
								</c:if>
							</td>
							<td class="col-md-3 text-center"><a href="viewTeam?id=${item.idAwayTeam}">${item.idAwayTeamValue}</a></td>
							<c:choose>
								<c:when test="${item.isDisplay == 1}">
									<td class="col-md-1 text-center">Y
										<a href="displayGame?page=${page.nowPage}&id=${item.idGame}&isDisplay=${item.isDisplay}<c:if test="${where != null}">&where=${where}</c:if>" 
											class="unDisplay">(변경)</a>
									</td>
								</c:when>
								<c:otherwise>
									<td class="col-md-1 text-center" style="color:red;">N
										<a href="displayGame?page=${page.nowPage}&id=${item.idGame}&isDisplay=${item.isDisplay}<c:if test="${where != null}">&where=${where}</c:if>" 
											class="display">(변경)</a>
									</td>
								</c:otherwise>
							</c:choose>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		
		<div class="text-center">
			<ul class="pagination">

				<!-- 이전 그룹 -->
				<c:choose>
					<c:when test="${page.startPage > page.pageGroupCount}">
						<li><a href="listGame?page=${page.startPage-1}<c:if test="${where != null}">&where=${where}</c:if>">&laquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&laquo;</a></li>
					</c:otherwise>
				</c:choose>
				
				<!-- 페이지 번호 -->
				<c:forEach begin="${page.startPage}" end="${page.endPage}" step="1" var="now">
					<c:choose>
						<c:when test="${page.nowPage == now}">
							<li class="active"><a href="#">${now}</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="listGame?page=${now}<c:if test="${where != null}">&where=${where}</c:if>">${now}</a></li>
						</c:otherwise>
					</c:choose>
				</c:forEach>

				<!-- 다음 그룹 -->
				<c:choose>
					<c:when test="${page.endPage < page.lastGroupFirstPage}">
						<li><a href="listGame?page=${page.endPage+1}<c:if test="${where != null}">&where=${where}</c:if>">&raquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&raquo;</a></li>
					</c:otherwise>
				</c:choose>

			</ul>
		</div>

	</div>
	
	<script type="text/javascript">
		$(function() {
			
			if ($("select[name='sport'] > option:selected").index() > 0) {
				$("select[name='league']").empty();
				
				var sport = $("select[name='sport']").find("option:selected").val();
				
				$.ajax({
					url: "league",
					data: "sport=" + sport,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idLeague = $(this).find("idLeague").text();
							var leagueName = $(this).find("leagueName").text();
							
							var option = $("<option>").html(leagueName);
							option.attr({'value' : idLeague});
							
							if (idLeague == "${league}") {
								option.attr({'selected' : "selected"});
							}
							
							$("select[name='league']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			}
			
			if ($("select[name='homeSport'] > option:selected").index() > 0) {
				$("select[name='homeLeague']").empty();
				
				var sport = $("select[name='homeSport']").find("option:selected").val();
				
				$.ajax({
					url: "league",
					data: "sport=" + sport,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					async: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idLeague = $(this).find("idLeague").text();
							var leagueName = $(this).find("leagueName").text();
							
							var option = $("<option>").html(leagueName);
							option.attr({'value' : idLeague});
							
							if (idLeague == "${homeLeague}") {
								option.attr({'selected' : "selected"});
							}
							
							$("select[name='homeLeague']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			}
			
			if ($("select[name='awaySport'] > option:selected").index() > 0) {
				$("select[name='awayLeague']").empty();
				
				var sport = $("select[name='awaySport']").find("option:selected").val();
				
				$.ajax({
					url: "league",
					data: "sport=" + sport,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					async: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idLeague = $(this).find("idLeague").text();
							var leagueName = $(this).find("leagueName").text();
							
							var option = $("<option>").html(leagueName);
							option.attr({'value' : idLeague});
							
							if (idLeague == "${awayLeague}") {
								option.attr({'selected' : "selected"});
							}
							
							$("select[name='awayLeague']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			}
			
			if ($("select[name='homeLeague'] > option:selected").index() > 0) {
				$("select[name='homeTeam']").empty();
				
				var league = $("select[name='homeLeague']").find("option:selected").val();
				
				$.ajax({
					url: "team",
					data: "league=" + league,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idTeam = $(this).find("idTeam").text();
							var teamName = $(this).find("teamName").text();
							
							var option = $("<option>").html(teamName);
							option.attr({'value' : idTeam});
							
							if (idTeam == "${homeTeam}") {
								option.attr({'selected' : "selected"});
							}
							
							$("select[name='homeTeam']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			}
			
			if ($("select[name='awayLeague'] > option:selected").index() > 0) {
				$("select[name='awayTeam']").empty();
				
				var league = $("select[name='awayLeague']").find("option:selected").val();
				
				$.ajax({
					url: "team",
					data: "league=" + league,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idTeam = $(this).find("idTeam").text();
							var teamName = $(this).find("teamName").text();
							
							var option = $("<option>").html(teamName);
							option.attr({'value' : idTeam});
							
							if (idTeam == "${awayTeam}") {
								option.attr({'selected' : "selected"});
							}
							
							$("select[name='awayTeam']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			}
			
			
			$("select[name='sport']").change(function() {
				$("select[name='league']").empty();
				
				var sport = $(this).find("option:selected").val();
				
				$.ajax({
					url: "league",
					data: "sport=" + sport,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idLeague = $(this).find("idLeague").text();
							var leagueName = $(this).find("leagueName").text();
							
							var option = $("<option>").html(leagueName);
							option.attr({'value' : idLeague});
							
							$("select[name='league']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
			
			$("select[name='homeSport']").change(function() {
				$("select[name='homeLeague']").empty();
				
				$("select[name='homeTeam']").empty();
				var option1 = $("<option>").html("- 리그를 먼저 선택하여 주세요 -");
				option1.attr({'value' : 'default'});
				$("select[name='homeTeam']").append(option1);
				
				var sport = $(this).find("option:selected").val();
				
				$.ajax({
					url: "league",
					data: "sport=" + sport,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idLeague = $(this).find("idLeague").text();
							var leagueName = $(this).find("leagueName").text();
							
							var option = $("<option>").html(leagueName);
							option.attr({'value' : idLeague});
							
							$("select[name='homeLeague']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
			
			$("select[name='awaySport']").change(function() {
				$("select[name='awayLeague']").empty();
				
				$("select[name='awayTeam']").empty();
				var option1 = $("<option>").html("- 리그를 먼저 선택하여 주세요 -");
				option1.attr({'value' : 'default'});
				$("select[name='awayTeam']").append(option1);
				
				var sport = $(this).find("option:selected").val();
				
				$.ajax({
					url: "league",
					data: "sport=" + sport,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idLeague = $(this).find("idLeague").text();
							var leagueName = $(this).find("leagueName").text();
							
							var option = $("<option>").html(leagueName);
							option.attr({'value' : idLeague});
							
							$("select[name='awayLeague']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
			
			$("select[name='homeLeague']").change(function() {
				$("select[name='homeTeam']").empty();
				
				var league = $(this).find("option:selected").val();
				
				$.ajax({
					url: "team",
					data: "league=" + league,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idTeam = $(this).find("idTeam").text();
							var teamName = $(this).find("teamName").text();
							
							var option = $("<option>").html(teamName);
							option.attr({'value' : idTeam});
							
							$("select[name='homeTeam']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
			
			$("select[name='awayLeague']").change(function() {
				$("select[name='awayTeam']").empty();
				
				var league = $(this).find("option:selected").val();
				
				$.ajax({
					url: "team",
					data: "league=" + league,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idTeam = $(this).find("idTeam").text();
							var teamName = $(this).find("teamName").text();
							
							var option = $("<option>").html(teamName);
							option.attr({'value' : idTeam});
							
							$("select[name='awayTeam']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
		});
	</script>
	
	<script type="text/javascript">
		$(function() {
			
			$(".unDisplay").click(function() {
				if (!confirm("정말 비전시처리 하시겠습니까?")) {
					return false;
				}
			});
			
			$(".display").click(function() {
				if (!confirm("정말 전시처리 하시겠습니까?")) {
					return false;
				}
			});
			
			$("#searchTeam").submit(function() {
				
				
			});
		});
	</script>
  </body>
</html>